<template>
  <div>
    <ul class="Aside Aside-floats">
      <div class="Aside-head">
        <img
          :src="
            $store.state.qiniu + $store.state.app_cover + $store.state.imgRotate
          "
          alt=""
        />
      </div>
      <li v-for="(menu, index) in filters" :key="index" class="Aside-item">
        <router-link
          :to="menu.path"
          :class="menu.path == path ? 'Aside-active' : ''"
        >
          <img v-if="menu.path == path" :src="menu.iconSelected" alt="" />
          <img v-else :src="menu.icon" alt="" />
          <span>{{ menu.title }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      path: "/overview",
      filters: []
    };
  },
  computed: {
    menus() {
      let items = [
        {
          name: "HomePage",
          path: "/HomePage",
          icon: "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0.svg",
          iconSelected:
            "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0%E9%80%89%E4%B8%AD.png",
          title: "概述"
        },
        {
          name: "decorate",
          path: "/decorate",
          icon: "https://oss.ztwlxx.cn/%E8%A3%85%E4%BF%AE.svg",
          iconSelected:
            "https://oss.ztwlxx.cn/%E8%A3%85%E4%BF%AE%E9%80%89%E4%B8%AD.png",
          title: "装修"
        },
        {
          name: "users",
          path: "/users",
          icon: "https://oss.ztwlxx.cn/%E7%94%A8%E6%88%B7.svg",
          iconSelected:
            "https://oss.ztwlxx.cn/%E7%94%A8%E6%88%B7%E9%80%89%E4%B8%AD.png",
          title: "用户"
        },
        {
          name: "stores",
          path: "/stores",
          icon: "https://oss.ztwlxx.cn/%E9%97%A8%E5%BA%97.png",
          iconSelected:
            "https://oss.ztwlxx.cn/%E9%97%A8%E5%BA%97%E9%80%89%E4%B8%AD.png",
          title: "门店"
        },
        {
          name: "goods",
          path: "/goods",
          icon: "https://oss.ztwlxx.cn/%E5%95%86%E5%93%811.svg",
          iconSelected:
            "https://oss.ztwlxx.cn/%E5%95%86%E5%93%81%E9%80%89%E4%B8%AD.png",
          title: "商品"
        },
        {
          name: "order",
          path: "/order",
          icon: "https://oss.ztwlxx.cn/%E8%AE%A2%E5%8D%95.svg",
          iconSelected:
            "https://oss.ztwlxx.cn/%E8%AE%A2%E5%8D%95%E9%80%89%E4%B8%AD.png",
          title: "订单"
        },

        {
          name: "vipCard",
          path: "/vipCard",
          icon: "https://oss.ztwlxx.cn/%E4%BC%9A%E5%91%98%E5%8D%A1.svg",
          iconSelected:
            "https://oss.ztwlxx.cn/%E4%BC%9A%E5%91%98%E5%8D%A1%E9%80%89%E4%B8%AD.png",
          title: "会员"
        },
        {
          name: "send",
          path: "/send",
          icon: "https://oss.ztwlxx.cn/%E9%85%8D%E9%80%81.svg",
          iconSelected:
            "https://oss.ztwlxx.cn/%E9%85%8D%E9%80%81%E9%80%89%E4%B8%AD.png",
          title: "配送"
        },

        // {
        //   name: "coupons",
        //   path: "/coupons",
        //   icon: "http://oss.ztwlxx.cn/%E6%8A%98%E6%89%A3Aside.svg",
        //   title: "优惠劵"
        // },
        {
          name: "market1",
          path: "/market",
          icon: "https://oss.ztwlxx.cn/%E8%90%A5%E9%94%80.svg",
          iconSelected:
            "https://oss.ztwlxx.cn/%E8%90%A5%E9%94%80%E9%80%89%E4%B8%AD.png",
          title: "营销"
        },
        {
          name: "wx",
          path: "/wx",
          icon: "https://oss.ztwlxx.cn/%E5%BE%AE%E4%BF%A1.svg",
          iconSelected:
            "https://oss.ztwlxx.cn/%E5%BE%AE%E4%BF%A1%E9%80%89%E4%B8%AD.png",
          title: "微信"
        },
        {
          name: "shezhi",
          path: "/shopSetting",
          icon: "https://oss.ztwlxx.cn/%E8%AE%BE%E7%BD%AE.svg",
          iconSelected:
            "https://oss.ztwlxx.cn/%E8%AE%BE%E7%BD%AE%E9%80%89%E4%B8%AD.png",
          title: "设置"
        }
      ];
      return items;
    }
  },
  watch: {
    $route(to) {
      this.path = to.matched[1].path;
    }
  },
  created() {
    this.path = this.$route.matched[1].path;
    this.filters = this.menus;
    // this.menus.forEach(ele => {
    //   ele.affiliation.filter(item => {
    //     if (item === "商城") {
    //       this.filters.push(ele);
    //     }
    //   });
    // });
  }
};
</script>
<style lang="scss" scoped>
.Aside {
  width: 140px;
  height: 100vh;
  background-color: #444444;
  box-sizing: border-box;
  .Aside-head {
    width: 140px;
    height: 180px;
    line-height: 240px;
    text-align: center;
    background-color: #444444;
    img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }
  }
  .Aside-item {
    height: 52px;
    line-height: 52px;
    > a {
      width: 100%;
      height: 100%;
      display: inline-block;
      align-items: center;
      text-align: center;
      color: #fff;
      img {
        width: 12px;
        height: 12px;
        margin-right: 6px;
      }
      span {
        font-size: 14px;
      }
    }
    .Aside-active {
      background: #fff;
      color: #444444;
    }
  }
}
.Aside-floats {
  float: left;
}
</style>
